<template>
    <div class="numberPad">
        <div class="output">{{ output }}</div>
        <div class="buttons">
            <button @click="inputContent">1</button>
            <button @click="inputContent">2</button>
            <button @click="inputContent">3</button>
            <button @click="remove">删除</button>
            <button @click="inputContent">4</button>
            <button @click="inputContent">5</button>
            <button @click="inputContent">6</button>
            <button @click="clear">清空</button>
            <button @click="inputContent">7</button>
            <button @click="inputContent">8</button>
            <button @click="inputContent">9</button>
            <button @click="ok" class="ok">OK</button>
            <button @click="inputContent" class="zero">0</button>
            <button @click="inputContent">.</button>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import {
        Component,
        Prop
    } from "vue-property-decorator";

    @Component
    export default class numberPad extends Vue {
        @Prop(Number) readonly value!: number;
        output = this.value.toString();

        inputContent(event: MouseEvent) {
            const button = event.target as HTMLButtonElement;
            const input = button.textContent!; //加！表示默认不为null
            if (this.output.length === 16) {
                return;
            }
            if (this.output === "0") {
                if ("0123456789".indexOf(input) >= 0) {
                    this.output = input;
                } else {
                    this.output += input;
                }
                return;
            }
            if (this.output.indexOf(".") >= 0) {
                if (input === ".") {
                    return;
                }
            }
            this.output += input;
        }

        remove() {
            if (this.output.length === 1) {
                this.output = "0";
            } else {
                this.output = this.output.slice(0, -1);
            }
        }

        clear() {
            this.output = "0";
        }

        ok() {
            const number = parseFloat(this.output);
            this.$emit("update:value", number);
            this.$emit("sumbit", number);
            this.output = "0";
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        > .output {
            @extend %clearFix;
            @extend %innerShadow;
            font-size: 36px;
            font-family: Consolas, monospace;
            padding: 9px 16px;
            text-align: right;
            min-height: 72px;
        }

        > .buttons {
            @extend %clearFix;

            > button {
                width: 25%;
                height: 64px;
                float: left;
                background: transparent;
                border: none;

                &.ok {
                    height: 64 * 2px;
                    float: right;
                }

                &.zero {
                    width: 25 * 2%;
                }

                $bg: #f5f5f5;

                &:nth-child(1) {
                    background: $bg;
                }

                &:nth-child(2),
                &:nth-child(5) {
                    background: darken($bg, 4%);
                }

                &:nth-child(3),
                &:nth-child(6),
                &:nth-child(9) {
                    background: darken($bg, 4 * 2%);
                }

                &:nth-child(4),
                &:nth-child(7),
                &:nth-child(10) {
                    background: darken($bg, 4 * 3%);
                }

                &:nth-child(8),
                &:nth-child(11),
                &:nth-child(13) {
                    background: darken($bg, 4 * 4%);
                }

                &:nth-child(14) {
                    background: darken($bg, 4 * 5%);
                }

                &:nth-child(12) {
                    background: darken($bg, 4 * 5.5%);
                }
            }
        }
    }
</style>
